<!doctype html>
<html>
    <head>
        <meta charset=utf-8>
        <title>simple editor</title>
        <link rel="stylesheet" type="text/css" href="template/css/entry.css">
        <link rel="stylesheet" type="text/css" href="template/css/prism.css">
        <style>
            #md {
                width: 50%;
                height: 100%;
                float: left;
                display: block;
                margin: 0;
                border: 0;
                resize: none;
                padding: 16px;
                border-right: 1px solid #d9d9d9;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            #html {
                width: 50%;
                height: 100%;
                float: right;
                display: block;
                margin: 0;
                background-color: #fcfaf2;
                overflow-y: auto;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            html, body, .main {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <textarea id="md">
#Hello World!
##test
###test2
$x^2=1$

[Google](http://google.com)
~~~~{python}
print 'hello world'
~~~~
test `test`</textarea>
            <div id="html" class="entry">
            </div>
        </div>
        <script src="lib/jquery.js"></script>
        <script src="lib/showdown.js"></script>
        <script src="template/js/prism.js"></script>
        <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
        <script type="text/x-mathjax-config">
          MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ["\\(","\\)"]], processEscapes: true}});
        </script>
        <script>
            function reescape(data) {
                return data.replace(/>/g, "&gt;").replace(/</g, "&lt;");
            }
            function mdupdate() {
                var converter = new Showdown.converter();
                var tmp = $("#md").val();
                tmp = tmp.replace(/~~~~\{(.*)\}\n([\s\S]*?)~~~~\n/mg, function(a1, a2, a3) {return "<pre><code class=\"language-"+a2+"\">"+reescape(a3)+"</code></pre>";});
                tmp = tmp.replace(/~~~~\n([\s\S]*?)~~~~\n/mg, function(a1, a2) {return "<pre><code>"+reescape(a2)+"</code></pre>"});
                tmp = converter.makeHtml(tmp);
                $("#html").html(tmp);
                Prism.highlightAll();
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, "html"]);
            }
            $(document).ready(function() {
                $("#md").on("keyup", function() {
                    mdupdate();
                });
                mdupdate();
            });
        </script>
    </body>
</html>
